<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>统计</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>
<style>
	main {
		height:auto;
		background:url(../img/main-bg.jpg) no-repeat center fixed;
		-webkit-background-size:cover;
		-moz-background-size:cover;
		-o-background-size:cover;
		background-size:cover
	}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content" >

	<div class="row">
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-success pull-right">累计</span>
					<h5>资产</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins"><lalel class="d1"></lalel></h1>
					<div class="stat-percent font-bold text-danger">单位：万元</div>
					<small>资产总值</small>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-info pull-right">总金额</span>
					<h5>金额</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins"><lalel class="d2"></lalel></h1>
					<div class="stat-percent font-bold text-danger">单位：万元
					</div>
					<small>累计总金额</small>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-primary pull-right">总数</span>
					<h5>人员</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins"><lalel class="d3"></lalel></h1>
					<div class="stat-percent font-bold text-danger">增加 <i class="fa fa-level-up"></i>
					</div>
					<small>人员总数</small>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-danger pull-right">本年新增</span>
					<h5>资产</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins"><lalel class="d4"></lalel></h1>
					<div class="stat-percent font-bold text-danger">单位：万元
					</div>
					<small>本年新增资产</small>
				</div>
			</div>
		</div>
	</div>
	<div class="row" style="height: 100%">
		<div class="col-sm-12" style="text-align: center;vertical-align: middle">
			<img th:src="@{/img/main-bg.jpg}" width="100%">

		</div>
	</div>

	<div class="row" style="display: none">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>订单</h5>
					<div class="pull-right">
						<div class="btn-group">
							<button type="button" class="btn btn-xs btn-white active">天</button>
							<button type="button" class="btn btn-xs btn-white">月</button>
							<button type="button" class="btn btn-xs btn-white">年</button>
						</div>
					</div>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-9">
							<div class="flot-chart">
								<div class="flot-chart-content" id="flot-dashboard-chart"></div>
							</div>
						</div>
						<div class="col-sm-3">
							<ul class="stat-list">
								<li>
									<h2 class="no-margins">2,346</h2>
									<small>订单总数</small>
									<div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
									</div>
									<div class="progress progress-mini">
										<div style="width: 48%;" class="progress-bar"></div>
									</div>
								</li>
								<li>
									<h2 class="no-margins ">4,422</h2>
									<small>最近一个月订单</small>
									<div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
									</div>
									<div class="progress progress-mini">
										<div style="width: 60%;" class="progress-bar"></div>
									</div>
								</li>
								<li>
									<h2 class="no-margins ">9,180</h2>
									<small>最近一个月销售额</small>
									<div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
									</div>
									<div class="progress progress-mini">
										<div style="width: 22%;" class="progress-bar"></div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row" style="display: none">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>用户项目列表</h5>
					<div class="ibox-tools">
						<a class="collapse-link">
							<i class="fa fa-chevron-up"></i>
						</a>
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="ibox-content">
					<table class="table table-hover no-margins">
						<thead>
						<tr>
							<th>状态</th>
							<th>日期</th>
							<th>用户</th>
							<th>值</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td><small>进行中...</small>
							</td>
							<td><i class="fa fa-clock-o"></i> 11:20</td>
							<td>青衣5858</td>
							<td class="text-navy"> <i class="fa fa-level-up"></i> 24%</td>
						</tr>
						<tr>
							<td><span class="label label-warning">已取消</span>
							</td>
							<td><i class="fa fa-clock-o"></i> 10:40</td>
							<td>徐子崴</td>
							<td class="text-navy"> <i class="fa fa-level-up"></i> 66%</td>
						</tr>
						<tr>
							<td><small>进行中...</small>
							</td>
							<td><i class="fa fa-clock-o"></i> 01:30</td>
							<td>姜岚昕</td>
							<td class="text-navy"> <i class="fa fa-level-up"></i> 54%</td>
						</tr>
						<tr>
							<td><small>进行中...</small>
							</td>
							<td><i class="fa fa-clock-o"></i> 02:20</td>
							<td>武汉大兵哥</td>
							<td class="text-navy"> <i class="fa fa-level-up"></i> 12%</td>
						</tr>
						<tr>
							<td><small>进行中...</small>
							</td>
							<td><i class="fa fa-clock-o"></i> 09:40</td>
							<td>荆莹儿</td>
							<td class="text-navy"> <i class="fa fa-level-up"></i> 22%</td>
						</tr>
						<tr>
							<td><span class="label label-primary">已完成</span>
							</td>
							<td><i class="fa fa-clock-o"></i> 04:10</td>
							<td>栾某某</td>
							<td class="text-navy"> <i class="fa fa-level-up"></i> 66%</td>
						</tr>
						<tr>
							<td><small>进行中...</small>
							</td>
							<td><i class="fa fa-clock-o"></i> 12:08</td>
							<td>范范范二妮</td>
							<td class="text-navy"> <i class="fa fa-level-up"></i> 23%</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>

<th:block th:include="include :: sparkline-js" />
<script type="text/javascript">
	$(document).ready(function () {

		$.get("/system/zichan/huizong/", function(result) {
			//console.log(result);
			console.log(result.data);
			var d =result.data;
			$('.d1').text(d.d1);
			$('.d2').text(d.d2);
			$('.d3').text(d.d3);
			$('.d4').text(d.d4);
		});

		// var data2 = [
		// 	[gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
		// 	[gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
		// 	[gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
		// 	[gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
		// 	[gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
		// 	[gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
		// 	[gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
		// 	[gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
		// ];
		//
		// var data3 = [
		// 	[gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
		// 	[gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
		// 	[gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
		// 	[gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
		// 	[gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
		// 	[gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
		// 	[gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
		// 	[gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
		// ];
		//
		//
		// var dataset = [
		// 	{
		// 		label: "订单数",
		// 		data: data3,
		// 		color: "#1ab394",
		// 		bars: {
		// 			show: true,
		// 			align: "center",
		// 			barWidth: 24 * 60 * 60 * 600,
		// 			lineWidth: 0
		// 		}
		//
		// 	}, {
		// 		label: "付款数",
		// 		data: data2,
		// 		yaxis: 2,
		// 		color: "#464f88",
		// 		lines: {
		// 			lineWidth: 1,
		// 			show: true,
		// 			fill: true,
		// 			fillColor: {
		// 				colors: [{
		// 					opacity: 0.2
		// 				}, {
		// 					opacity: 0.2
		// 				}]
		// 			}
		// 		},
		// 		splines: {
		// 			show: false,
		// 			tension: 0.6,
		// 			lineWidth: 1,
		// 			fill: 0.1
		// 		},
		// 	}
		// ];
		//
		//
		// var options = {
		// 	xaxis: {
		// 		mode: "time",
		// 		tickSize: [3, "day"],
		// 		tickLength: 0,
		// 		axisLabel: "Date",
		// 		axisLabelUseCanvas: true,
		// 		axisLabelFontSizePixels: 12,
		// 		axisLabelFontFamily: 'Arial',
		// 		axisLabelPadding: 10,
		// 		color: "#838383"
		// 	},
		// 	yaxes: [{
		// 		position: "left",
		// 		max: 1070,
		// 		color: "#838383",
		// 		axisLabelUseCanvas: true,
		// 		axisLabelFontSizePixels: 12,
		// 		axisLabelFontFamily: 'Arial',
		// 		axisLabelPadding: 3
		// 	}, {
		// 		position: "right",
		// 		clolor: "#838383",
		// 		axisLabelUseCanvas: true,
		// 		axisLabelFontSizePixels: 12,
		// 		axisLabelFontFamily: ' Arial',
		// 		axisLabelPadding: 67
		// 	}
		// 	],
		// 	legend: {
		// 		noColumns: 1,
		// 		labelBoxBorderColor: "#000000",
		// 		position: "nw"
		// 	},
		// 	grid: {
		// 		hoverable: false,
		// 		borderWidth: 0,
		// 		color: '#838383'
		// 	}
		// };
		//
		// function gd(year, month, day) {
		// 	return new Date(year, month - 1, day).getTime();
		// }
		//
		// var previousPoint = null,
		// 		previousLabel = null;
		//
		// $.plot($("#flot-dashboard-chart"), dataset, options);
	});


</script>
</body>
</html>

